<template>
  <view class="container bg-img flex-1">
    <view class="flex justify-center w-full mt-16">
      <image class="w-[77%]" src="@/static/logo.png" mode="widthFix"></image>
    </view>
    <view class="flex justify-center w-full mt-5">
      <image
        class="w-full"
        src="https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/h5/images/shark.png"
        mode="widthFix"
      ></image>
    </view>
    <view
      :class="isBigSreen ? 'mt-28' : 'mt-16'"
      class="flex justify-center w-full"
      @click="go"
    >
      <view class="go"> 开始进入 </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted } from "vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const go = () => {
  // toggleFullScreen();
  uni.navigateTo({
    url: "/pages/index/chooseKeyword",
  });
};
onLoad(() => {
  
});

const toggleFullScreen = () => {
  const element = document.documentElement; // 获取 <html> 元素
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    /* IE/Edge */
    element.msRequestFullscreen();
  }
};
</script>

<style lang="scss" scoped>
.bg-img {
  background: url("https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/h5/images/bgindex.png")
    no-repeat;
  background-position: center;
  background-size: cover;
  .go {
    width: 42%;
    padding: 2%;
    font-family: Source Han Serif CN, Source Han Serif CN;
    font-weight: 700;
    font-size: 48rpx;
    color: #2568ec;
    text-align: center;
    background: #ffe376;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
    border-radius: 67rpx 67rpx 67rpx 67rpx;
  }
}
</style>
